<!--角色权限 弹窗-->
<template>
  <div class="roleMessage">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="60px">
      <div class="form-small-title">
        <el-divider direction="vertical" class="form-divider"></el-divider>
        <span class="form-small-font">基本信息</span>
      </div>
      <el-row style="margin-top: 25px">
        <el-col :span="8">
          <el-form-item label="角色名称：" label-width="90px">
            <el-input v-model="ruleForm.characterName" placeholder="请输入" :readonly="status==='read'"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="角色编号：" label-width="90px">
            <el-input v-model="ruleForm.number" placeholder="请输入" :readonly="status==='read'"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态：" label-width="90px">
            <el-select v-model="ruleForm.wtlx" placeholder="请选择" :disabled="status==='read'">
              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="form-small-title">
        <el-divider direction="vertical" class="form-divider"></el-divider>
        <span class="form-small-font">任务权限</span>
      </div>
      <el-row style="margin-top: 25px">
        <el-col :span="24">
          <el-form-item label="按钮权限：" label-width="90px">
            <el-checkbox v-model="ruleForm.add" :disabled="status==='read'">新增</el-checkbox>
            <el-checkbox v-model="ruleForm.update" :disabled="status==='read'">修改</el-checkbox>
            <el-checkbox v-model="ruleForm.save" :disabled="status==='read'">保存</el-checkbox>
            <el-checkbox v-model="ruleForm.delete" :disabled="status==='read'">删除</el-checkbox>
            <el-checkbox v-model="ruleForm.upgrade" :disabled="status==='read'">升级</el-checkbox>
            <el-checkbox v-model="ruleForm.demotion" :disabled="status==='read'">降级</el-checkbox>
            <el-checkbox v-model="ruleForm.lead" :disabled="status==='read'">导入</el-checkbox>
            <el-checkbox v-model="ruleForm.export" :disabled="status==='read'">导出</el-checkbox>
            <el-checkbox v-model="ruleForm.print" :disabled="status==='read'">打印</el-checkbox>
            <el-checkbox v-model="ruleForm.projectkalender" :disabled="status==='read'">项目日历</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="查看范围：" label-width="90px">
            <el-select v-model="ruleForm.book" placeholder="请选择" :disabled="status==='read'" >
              <el-option v-for="item in bookOptions" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维护范围：" label-width="90px">
            <el-select v-model="ruleForm.maintenanceTask" placeholder="请选择" :disabled="status==='read'">
              <el-option v-for="item in maintenanceOptions" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "roleMessage",
  data() {
    return {
      ruleForm: {},
      rules: {},
      statusOptions: [],
      bookOptions: [],
      maintenanceOptions: []
    }
  },
  props: ['status','selectRow'],
  watch:{
    selectRow:{
      handler(val) {
        if(this.selectRow){
          this.ruleForm = JSON.parse(JSON.stringify(this.selectRow))
          this.ruleForm.add = this.checkboxInfo(this.ruleForm.add)
          this.ruleForm.update = this.checkboxInfo(this.ruleForm.update)
          this.ruleForm.save = this.checkboxInfo(this.ruleForm.save)
          this.ruleForm.delete = this.checkboxInfo(this.ruleForm.delete)
          this.ruleForm.upgrade = this.checkboxInfo(this.ruleForm.upgrade)
          this.ruleForm.demotion = this.checkboxInfo(this.ruleForm.demotion)
          this.ruleForm.lead = this.checkboxInfo(this.ruleForm.lead)
          this.ruleForm.export = this.checkboxInfo(this.ruleForm.export)
          this.ruleForm.print = this.checkboxInfo(this.ruleForm.print)
          this.ruleForm.projectkalender = this.checkboxInfo(this.ruleForm.projectkalender)
        }
      },
      immediate: true,
    }
  },
  methods:{
    checkboxInfo(value){
      if(value=='勾选'){
        return value = true
      }else{
        return value = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.roleMessage ::v-deep{
  .el-input__inner {
    border: 0 !important;
    border-bottom: 1px solid #DCDFE6 !important;
    border-radius: 0 !important;
    padding-right: 20px !important;
  }
}
.form-small-title {
  border-bottom: solid 2px #C0C4CC;
  padding-bottom: 10px;
  margin-top: 20px;
}

.form-divider {
  width: 5px;
  height: 26px;
  background: rgb(66, 185, 131);
}

.form-small-font {
  font-size: 19px;
  font-weight: 600;
  color: #303133;
}
</style>
